<template>
  <div class="main-sing-page">
    <div class="flex col" style="width:100%">
      <div class="info-box flex flex-between col-top">
        <div class="" style="width:25%">
          <div class="hander flex flex-start col-top">
            <i class="el-icon-back" @click="goBack" style="font-size:30px"></i>
            <div class="input-box">
              <div class="">
                <el-input v-model="stucardnum" placeholder="请刷卡或者输入卡号" ref="cardInput" :disabled="isSuccess"></el-input>
                <div class="tips" style="color:red;font-size:14px">提示：请刷卡或者输入卡号获取信息！</div>
              </div>
            </div>
            <el-button type="success" plain @click="shuaxin" style="margin-left:20px">重置</el-button>
          </div>
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="flex col">
              <el-avatar :size="150" :src="getInfo.headimg?$Url + '/upload/'+ getInfo.headimg:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"></el-avatar>
              <div style="font-size:28px;padding:20px">
                <span>{{getInfo.name}}</span>
                <span style="margin-left:30px">{{getInfo.sex}}</span>
              </div>
            </div>
            <div class="flex col info">
              <div><span class="label">年龄：</span> {{getInfo.age||'--'}} </div>
              <div><span class="label">昵称：</span> {{getInfo.nickname||'--'}} </div>
              <div><span class="label">电话：</span> {{getInfo.phone||'--'}}</div>
              <div><span class="label">住址：</span> {{getInfo.address||'--'}}</div>
              <div><span class="label">身份证号：</span> {{getInfo.idcard||'--'}}</div>
              <div><span class="label">H5账号：</span> {{getInfo.jiazhangphone||'--'}}</div>
              <div><span class="label">学生卡号：</span> {{getInfo.stucardnum||'--'}} </div>
              <div><span class="label">创建时间：</span> {{getInfo.createtime||'--'}}</div>
            </div>
          </el-card>
        </div>
        <div class="right" style="width:72%">
          <el-tabs type="border-card" v-model="activeTab" @tab-click="tabClick">
            <el-tab-pane label="报课记录">
              <!-- <el-table :data="findPaymentLoglist" border style="width: 100%"  height="600"  :header-cell-style="{
                  background: '#eef1f6',
                  color: '#606266',
                  'text-align': 'center'
                }"
                :cell-style="{ 'text-align': 'center' }">
                <el-table-column prop="paymentid" label="订单号" width="70"></el-table-column>
                <el-table-column prop="stuname" label="学员姓名" width="80"></el-table-column>
                <el-table-column prop="stuphone" label="手机号" width="110"></el-table-column>
                <el-table-column prop="lessioninfo" label="课程信息" show-overflow-tooltip></el-table-column>
                <el-table-column prop="empname" label="任课老师" show-overflow-tooltip></el-table-column>
                <el-table-column prop="alltimes" label="已上/总课次" width="150">
                  <template slot-scope="scop">
                    {{ scop.row.usedtimes + " / " + scop.row.alltimes }}
                    <el-progress :text-inside="true" :stroke-width="16" :percentage="((scop.row.usedtimes*100) / scop.row.alltimes).toFixed(2)*1"></el-progress>
                  </template>
                </el-table-column>
                <el-table-column prop="oldprice" label="原价" width="60"></el-table-column>
                <el-table-column prop="newprice" label="优惠价" width="80"></el-table-column>
                <el-table-column prop="orderstatus" label="是否缴费" width="80">
                  <template slot-scope="scop">
                    <el-tag type="warning" v-if="scop.row.orderstatus == 0">未缴费</el-tag>
                    <el-tag type="success" v-if="scop.row.orderstatus == 1">已缴费</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="" label="课程状态" width="80">
                  <template slot-scope="scop">
                    <el-tag type="success" v-if="scop.row.lessionstatus == 1">正常</el-tag>
                    <el-tag type="parmary" v-if="scop.row.lessionstatus == 2">完结</el-tag>
                    <el-tag type="warning" v-if="scop.row.lessionstatus == 3">退费</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="payinfo" label="付款信息" show-overflow-tooltip></el-table-column>
                <el-table-column prop="paytime" label="付款时间"></el-table-column>
                <el-table-column prop="reason" label="备注信息" show-overflow-tooltip></el-table-column>
                <el-table-column prop="" label="操作" width="120">
                  <template slot-scope="scop">
                    <el-button type="primary" icon="el-icon-edit" circle @click="editItem(scop.row)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle @click="del(scop.row.paymentid)"></el-button>
                  </template>
                </el-table-column>
              </el-table> -->
              <el-table :data="findPaymentLoglist" border style="width: 100%" :header-cell-style="{
                background: '#eef1f6',
                color: '#606266',
                'text-align': 'center'
              }"
                height="300" :cell-style="{ 'text-align': 'center' }">
                <!-- <el-table-column type="selection"></el-table-column> -->
                <el-table-column prop="stuname" label="学员姓名"></el-table-column>
                <el-table-column prop="stuphone" label="手机号"></el-table-column>
                <el-table-column prop="lessioninfo" label="课程信息"></el-table-column>
                <el-table-column prop="empname" label="任课老师"></el-table-column>
                <el-table-column prop="alltimes" label="已上/总课次">
                  <template slot-scope="scop">
                    {{scop.row.usedtimes + ' / ' + scop.row.alltimes}}
                    <el-progress :text-inside="true" :stroke-width="16" :percentage="((scop.row.usedtimes*100) / scop.row.alltimes).toFixed(2)*1"></el-progress>
                  </template>
                </el-table-column>
                <el-table-column prop="" label="操作" width="120">
                  <template slot-scope="scop">
                    <el-button type="primary" plain size="mini" @click="sing(scop.row.paymentid)">签到</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="上课记录">
              <el-table :data="findSignLoglist" border style="width: 100%"  height="600"  :header-cell-style="{
                  background: '#eef1f6',
                  color: '#606266',
                  'text-align': 'center'
                }"
                :cell-style="{ 'text-align': 'center' }">
                <!-- <el-table-column type="selection"></el-table-column> -->
                <el-table-column prop="signlogid" label="签到记录id" width="100"></el-table-column>
                <el-table-column prop="stuname" label="学生名字"></el-table-column>
                <el-table-column prop="stuphone" label="手机号"></el-table-column>
                <el-table-column prop="lessioninfo" label="课程信息" show-overflow-tooltip></el-table-column>
                <el-table-column prop="empname" label="任课老师"></el-table-column>
                <el-table-column prop="status" label="上课类型">
                  <template slot-scope="scop">
                    <el-tag type="success" v-if="scop.row.status == 1">正常</el-tag>
                    <el-tag type="warning" v-if="scop.row.status == 2">请假</el-tag>
                    <el-tag type="danger" v-if="scop.row.status == 3">补课</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="content" label="签到备注" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createtime" label="创建时间"></el-table-column>
                <el-table-column prop="creator" label="签到人" width="100"></el-table-column>
                <!-- <el-table-column prop="" label="操作" width="80">
                  <template slot-scope="scop">
                    <el-button type="primary" icon="el-icon-edit" circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle @click="del(scop.row.signlogid)"></el-button>
                  </template>
                </el-table-column> -->
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="考级列表">
              <el-table :data="findKaojiListList" border style="width: 100%"  height="600"  :header-cell-style="{
                  background: '#eef1f6',
                  color: '#606266',
                  'text-align': 'center'
                }"
                :cell-style="{ 'text-align': 'center' }">
                <!-- <el-table-column type="selection"></el-table-column> -->
                <!-- <el-table-column prop="kaojiid" label="考级ID"></el-table-column> -->
                <el-table-column prop="stuname" label="学员名字"></el-table-column>
                <el-table-column prop="stuphone" label="手机号"></el-table-column>
                <el-table-column prop="stuidcard" label="身份证"></el-table-column>
                <el-table-column prop="lessionname" label="课程"></el-table-column>
                <el-table-column prop="ispay" label="是否付款">
                  <template slot-scope="scop">
                    <el-tag type="success" v-if="scop.row.ispay == 0">未付款</el-tag>
                    <el-tag type="warning" v-if="scop.row.ispay == 1">已付款</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="payinfo" label="付款信息" show-overflow-tooltip></el-table-column>
                <el-table-column prop="price" label="费用"></el-table-column>
                <el-table-column prop="level" label="等级"></el-table-column>
                <el-table-column prop="ispass" label="是否通过">
                  <template slot-scope="scop">
                    <el-tag type="danger" v-if="scop.row.ispass == 0">待考核</el-tag>
                    <el-tag type="success" v-if="scop.row.ispass == 1">通过</el-tag>
                    <el-tag type="warning" v-if="scop.row.ispass == 2">未通过</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="createtime" label="创建时间" show-overflow-tooltip></el-table-column>
                <!-- <el-table-column prop="" label="操作" width="120">
                  <template slot-scope="scop">
                    <el-button type="primary" icon="el-icon-edit" circle @click="updateBtn(scop.row)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle @click="del(scop.row.kaojiid)"></el-button>
                  </template>
                </el-table-column> -->
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="购买记录">
              <el-table :data="findProductSaleLogList" border style="width: 100%"  height="600"  :header-cell-style="{
                    background: '#eef1f6',
                    color: '#606266',
                    'text-align': 'center'
                  }"
                :cell-style="{ 'text-align': 'center' }">
                <!-- <el-table-column type="selection"></el-table-column> -->
                <el-table-column prop="stuname" label="学生"></el-table-column>
                <el-table-column prop="productinfo" label="产品信息" show-overflow-tooltip></el-table-column>
                <el-table-column prop="price" label="价格（元）"></el-table-column>
                <el-table-column prop="ispay" label="是否付款">
                  <template slot-scope="scop">
                    <el-tag type="success" v-if="scop.row.ispay == 1">已付款</el-tag>
                    <el-tag type="warning" v-if="scop.row.ispay == 2">未付款</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="payimg" label="凭证">
                  <template slot-scope="scop">
                    <el-image fit="fil" style="width: 80px; height: 50px" :src="$Url + '/upload/' + scop.row.payimg"
                      :preview-src-list="[$Url + '/upload/' + scop.row.payimg]">
                    </el-image>
                  </template>
                </el-table-column>
                <el-table-column prop="payinfo" label="付款信息" show-overflow-tooltip></el-table-column>
                <el-table-column prop="paytime" label="付款时间"></el-table-column>
                <el-table-column prop="createtime" label="创建时间"></el-table-column>
                <!-- <el-table-column prop="" label="操作" width="120">
                  <template slot-scope="scop">
                    <el-button type="primary" icon="el-icon-edit" circle @click="edit(scop.row)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle @click="del(scop.row.productsalelogid)"></el-button>
                  </template>
                </el-table-column> -->
              </el-table>
            </el-tab-pane>
          </el-tabs>
          <el-card class="box-card" shadow="hover" body-style="{overflow: auto;}" v-if="false">
            <div slot="header" class="clearfix">
              <span>课程记录</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <el-table :data="logtableData" border style="width: 100%" :header-cell-style="{
                background: '#eef1f6',
                color: '#606266',
                'text-align': 'center'
              }"
              height="300" :cell-style="{ 'text-align': 'center' }">
              <!-- <el-table-column type="selection"></el-table-column> -->
              <el-table-column prop="signlogid" label="签到记录id" width="100"></el-table-column>
              <el-table-column prop="stuname" label="学生名字"></el-table-column>
              <el-table-column prop="stuphone" label="手机号"></el-table-column>
              <el-table-column prop="lessioninfo" label="课程信息" show-overflow-tooltip></el-table-column>
              <el-table-column prop="empname" label="任课老师"></el-table-column>
              <el-table-column prop="status" label="上课类型">
                <template slot-scope="scop">
                  <el-tag type="success" v-if="scop.row.status == 1">正常</el-tag>
                  <el-tag type="warning" v-if="scop.row.status == 2">请假</el-tag>
                  <el-tag type="danger" v-if="scop.row.status == 3">补课</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="签到备注" show-overflow-tooltip></el-table-column>
              <el-table-column prop="createtime" label="创建时间" show-overflow-tooltip></el-table-column>
              <el-table-column prop="creator" label="签到人" width="100"></el-table-column>
            </el-table>
          </el-card>
          <el-card class="box-card" shadow="hover" v-if="false">
            <div slot="header" class="clearfix">
              <span>课程卡</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <el-table :data="paytableData" border style="width: 100%" :header-cell-style="{
                background: '#eef1f6',
                color: '#606266',
                'text-align': 'center'
              }"
              height="300" :cell-style="{ 'text-align': 'center' }">
              <!-- <el-table-column type="selection"></el-table-column> -->
              <el-table-column prop="stuname" label="学员姓名"></el-table-column>
              <el-table-column prop="stuphone" label="手机号"></el-table-column>
              <el-table-column prop="lessioninfo" label="课程信息"></el-table-column>
              <el-table-column prop="empname" label="任课老师"></el-table-column>
              <el-table-column prop="alltimes" label="已上/总课次">
                <template slot-scope="scop">
                  {{scop.row.usedtimes + ' / ' + scop.row.alltimes}}
                  <el-progress :text-inside="true" :stroke-width="16" :percentage="((scop.row.usedtimes*100) / scop.row.alltimes).toFixed(2)*1"></el-progress>
                </template>
              </el-table-column>
              <el-table-column prop="" label="操作" width="120">
                <template slot-scope="scop">
                  <el-button type="primary" @click="sing(scop.row.paymentid)">签到</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </div>
    </div>
    <el-dialog title="签到" center :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="singForm" ref="ruleForm" label-width="100px" class="edit-form">
        <el-form-item label="已选择学员：" v-if="paymentids.length>0">
          <el-tag type="success" v-for="e in paymentids" :key="e">{{paytableData.filter(m=>m.paymentid ===
            e)[0].stuname}}</el-tag>
        </el-form-item>
        <el-form-item label="签到类型：" v-if="paymentids.length>0">
          <el-radio-group v-model="singForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">请假</el-radio>
            <el-radio :label="3">补课</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上课内容：" prop="empid">
          <el-input type="textarea" :rows="2" placeholder="请输入上课内容" v-model="singForm.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doSign">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
           
<script>
// 报课记录：/payment/findPaymentLog  传stuid
// 上课记录：/payment/findSignLog  传stuid
// 考级列表：/kaoji/findKaojiList  传stuid
// 购买记录：/product/findProductSaleLog  传stuid
import { findstuinfoBystucardnum, dosign, findPaymentLog, findSignLog, findKaojiList, findProductSaleLog } from "@/api/user";
import { setTimeout } from 'timers';
export default {
  data() {
    return {
      stucardnum: '',
      yu: 0,
      getInfo: {},
      logtableData: [],
      paytableData: [],
      isSuccess: false,
      dialogFormVisible: false,
      paymentids: [],
      singForm: {
        content: '',
        status: 1
      },
      activeTab: '0',
      findPaymentLoglist: [],
      findSignLoglist: [],
      findKaojiListList: [],
      findProductSaleLogList: []
    }
  },
  watch: {
    stucardnum(n, l) {
      if (n && n.length >= 10) {
        setTimeout(() => {
          this.getData()
        }, 100)
      }
    }
  },
  computed: {
    querdata() {
      return {
        stucardnum: this.stucardnum,
      }
    },
    getstuid() {
      return {
        stuid: this.getInfo.stuid || this.getInfo.id
      }
    }
  },
  mounted() {
    this.inputFocus()
  },
  methods: {
    tabClick() {
      if (!this.getstuid.stuid) {
        return
      }
      const { activeTab } = this
      if (activeTab == 0) {
        this.getfindPaymentLog()
      } else if (activeTab == 1) {
        this.getfindSignLog()
      } else if (activeTab == 2) {
        this.getfindKaojiList()
      } else if (activeTab == 3) {
        this.getfindProductSaleLog()
      }
    },
    goBack() {
      this.$router.go(-1)
    },
    shuaxin() {
      this.$router.go(0)
      // this.$options.data()
      // console.log(123);
      // this.inputFocus()
    },
    inputFocus() {
      this.$refs.cardInput.focus()
    },
    async getData() {
      const res = await findstuinfoBystucardnum.post(this.querdata);
      if (res.resultCode === "000000") {
        this.stucardnum = ''
        this.isSuccess = true
        this.getInfo = res.data
        this.logtableData = res.data.signLogList
        this.paytableData = res.data.paymentLogList
      } else {
        this.$message.error(res.resultInfo);
        this.stucardnum = ''
        this.isSuccess = false
      }
      if (this.getstuid.stuid) {
        this.getfindPaymentLog()
      }
    },
    async getfindPaymentLog() {
      const res = await findPaymentLog.post(this.getstuid);
      if (res.resultCode === "000000") {
        this.findPaymentLoglist = res.data.paymentloglist;
      } else {
        this.$message.error(res.resultInfo);
      }
    },
    async getfindSignLog() {
      const res = await findSignLog.post(this.getstuid);
      if (res.resultCode === "000000") {
        this.findSignLoglist = res.data.signloglist;
      } else {
        this.$message.error(res.resultInfo);
      }
    },
    async getfindKaojiList() {
      const res = await findKaojiList.post(this.getstuid);
      if (res.resultCode === "000000") {
        this.findKaojiListList = res.data.kaojiList;
      } else {
        this.$message.error(res.resultInfo);
      }
    },
    async getfindProductSaleLog() {
      const res = await findProductSaleLog.post(this.getstuid);
      if (res.resultCode === "000000") {
        this.findProductSaleLogList = res.data.productSaleLogList;
      } else {
        this.$message.error(res.resultInfo);
      }
    },
    sing(val) {
      this.paymentids = [val]
      this.dialogFormVisible = true
      this.singForm.content = ''
    },
    async doSign() {
      const res = await dosign.post({ paymentids: this.paymentids, content: this.singForm.content, status:this.singForm.status });
      console.log(res, 22);

      if (res.resultCode === "000000") {
        this.$message.success(res.resultInfo);
        this.dialogFormVisible = false
        this.open()
        // 
      } else {
        this.$message.error(res.resultInfo);
      }
    },
    open() {
      this.$confirm('签到成功！', '恭喜', {
        confirmButtonText: '我知道了',
        showCancelButton: false,
        type: 'success'
      }).then(() => {
        this.$router.go(0)
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang='scss'>
.el-page-header__title {
  font-size: 20px !important;
  line-height: 40px;
}
.main-sing-page {
  width: 100%;
  padding: 30px 50px 0 50px;

  .box-card {
    overflow: auto;
  }
  .hander {
    padding: 0px 0 30px 0px;
    .input-box {
      padding: 0 30px;
    }
  }
  .info-box {
    width: 100%;
    // padding: 20px;
    // border-radius: 10px;
    // border: 1px solid #ccc;
    .el-tabs__item {
      font-weight: 700;
      font-size: 22px;
      color: #000;
    }
  }
  .info {
    div {
      width: 100%;
      font-size: 20px;
      padding: 10px;
      // color: #999
    }
    .label {
      display: inline-block;
      width: 100px;
      text-align: right;
      // color: #000;
      font-weight: 700;
    }
  }
}
</style>